<!--
  @Description:自定义导航-目录关联内容配置(目录关联的为帮助中心文章)
  @Author:zqy
  @Date:2023-08-28 16:20:35
  @Last Modified by:zqy
  @Last Modified time:2023-08-28 16:20:35
-->
<template>
  <el-dialog
    ref="refDlg"
    :title="`【${detailData.tabName}】关联内容`"
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :hide-func-bar="true"
    width="80%"
    custom-class="custom-dlg"
    @close="closeDialog"
  >
    <div>
      <table-box
        v-if="detailData && detailData.id"
        ref="refTable"
        :selected-arry.sync="tableSelected"
        :table-config="tableConfig"
        :other-filters="otherFilters"
        table-row-key="id"
        :table-height="400"
        :table-sortable="false"
        :show-custom-setting="false"
        @btnOperate="btnOperate"
      />
      <HelpList
        v-if="showEdit"
        :visible.sync="showEdit"
        :multiple="!(activeRow && activeRow.id)"
        @change="confirmHelpContent"
      />
    </div>
  </el-dialog>
</template>
<script>
import HelpList from '@/components/RelateCategoy/HelpList'
import { saveHelpCenterContent, batchCreateContent, delHelpCenterContent, updateHelpCenterContentSort } from '@/api/tabDefine'
export default {
  name: 'DirectoryContentList',
  components: { HelpList },
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    const that = this
    return {
      tableSelected: [], // 当前所选中表格行数据
      otherFilters: [], // 表格额外查询条件
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/v2RefTabConfHelpCenterContent/page`,
        tabIndex: 2030,
        hideSearchBar: true,
        sort: 'sort',
        order: 'asc',
        pageSize: 10,
        setting: [
          {
            prop: 'helpContentTitle',
            label: '名称',
            minWidth: 150
          },
          {
            prop: 'categoryName',
            label: '所属类目',
            minWidth: 100
          },
          {
            prop: 'classifyName',
            label: '所属模块',
            minWidth: 100
          },
          {
            prop: 'remoteLastUpdateTime',
            label: '修改时间',
            width: 150
          },
          {
            prop: 'sort',
            label: '排序',
            width: 200,
            fixed: 'right',
            sortable: false,
            type: 'hidden',
            overflowHidden: false,
            render: (_h, row) => {
              const btns = []
              if (this.hasPermission('top')) {
                btns.push(<el-button type='text' size='mini' onClick={that.handleSort.bind(this, row, 'top')} class='btn-green my-txt-btn'>置顶</el-button>)
              }
              if (this.hasPermission('up')) {
                btns.push(<el-button type='text' size='mini' onClick={that.handleSort.bind(this, row, 'moveUp')} class='btn-green my-txt-btn'>上移</el-button>)
              }
              if (this.hasPermission('down')) {
                btns.push(<el-button type='text' size='mini' onClick={that.handleSort.bind(this, row, 'moveDown')} class='btn-green my-txt-btn'>下移</el-button>)
              }
              if (this.hasPermission('bottom')) {
                btns.push(<el-button type='text' size='mini' onClick={that.handleSort.bind(this, row, 'bottom')} class='btn-green my-txt-btn'>置底</el-button>)
              }
              return _h('div', btns)
            }
          },
          {
            prop: 'opetate',
            label: '操作',
            width: 120,
            fixed: 'right',
            sortable: false,
            type: 'hidden',
            overflowHidden: false,
            render: (_h, row) => {
              const btns = []
              if (this.hasPermission('edit')) {
                btns.push(<el-button type='text' size='mini' onClick={that.handleEdit.bind(this, row)} class='btn-green my-txt-btn'>重新选择</el-button>)
              }
              if (this.hasPermission('del')) {
                btns.push(<el-button type='text' size='mini' onClick={that.handleDelete.bind(this, row)} class='btn-green my-txt-btn'>删除</el-button>)
              }
              return _h('div', btns)
            }
          }
        ],
        btnList: [
          {
            buttonName: '新增',
            optCode: 'add',
            outerFlag: true
          }]
      },
      sorting: false,
      showEdit: false,
      activeRow: {}
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    },
    tabConfId() {
      return this.detailData && this.detailData.id || ''
    }
  },
  watch: {

  },
  created() {
    this.otherFilters = [
      { id: 'tabConfId', property: 'tabConfId', operator: '=', value: this.detailData.id }
    ]
  },
  mounted() {
    this.$nextTick(() => {

    })
  },
  methods: {
    closeDialog() {
      this.dialogShow = false
    },
    hasPermission(code) {
      return true
    },
    btnOperate(code) {
      switch (code) {
        case 'add':
          this.handleEdit()
          break
      }
    },
    // 刷新表格数据
    refreshTable(isInit) {
      this.$nextTick(() => {
        this.$refs.refTable.initTableData(isInit ? '' : 'onPage')
      })
    },
    // 新增/重新选择
    handleEdit(row) {
      if (row && row.id) {
        this.activeRow = { ...row, ...{}}
      } else {
        this.activeRow = {}
      }
      this.$nextTick(() => {
        this.showEdit = true
      })
    },
    confirmHelpContent(data) {
      if (this.activeRow && this.activeRow.id) {
        this.handleModifyData(data)
        return
      }
      if (data.length === 0) {
        this.$message.warning('内容数据异常')
        return
      }
      const params = data.map(v => {
        return {
          helpContentId: v.id,
          tabConfId: this.tabConfId
        }
      })
      // 批量新增
      batchCreateContent(params).then(res => {
        if (res.success === 1) {
          this.$message.success('批量新增成功')
          this.refreshTable()
        }
      })
    },
    handleModifyData(data) {
      const params = {
        helpContentId: data.id,
        tabConfId: this.tabConfId,
        id: this.activeRow.id
      }
      saveHelpCenterContent(params).then(res => {
        if (res.success === 1) {
          this.$message.success('保存成功')
          this.refreshTable()
        }
      })
    },
    // 删除
    handleDelete(row) {
      const { id, helpContentTitle } = row
      this.$confirm(`确定删除内容【${helpContentTitle}】吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delHelpCenterContent(id).then(res => {
          if (res.success === 1) {
            this.$message.success('删除成功')
            this.refreshTable()
          }
        })
      })
    },
    /**
     * 排序
     * @param {Object} row 排序行
     * @param {string} type 移动类型(bottom 置底 ，top 置顶 ， moveDown 下移 ，  moveUp 上移)
    */
    handleSort(row, type) {
      if (this.sorting) return
      const now = Date.now()
      if (this.sortTime) {
        const diffTime = Math.floor((now - this.sortTime) / 1000)
        // 对比排序操作时间差，大于2s的可操作
        if (diffTime < 2) return
      }
      this.sortTime = now
      const params = {
        id: row.id,
        type
      }
      this.sorting = true
      updateHelpCenterContentSort(params).then(res => {
        this.sorting = false
        if (res.success === 1) {
          this.refreshTable()
        }
      }).catch(() => {
        this.sorting = false
      })
    }

  }
}
</script>
<style lang='scss' scoped>
  .my-txt-btn{
    padding: 0 !important;
  }
</style>
